
import { Form } from '@ant-design/compatible';
import { Button, message, Icon, DatePicker, Input, Select } from 'antd';
import React, { useState, useRef, useEffect, useCallback } from 'react';
import '@ant-design/compatible/assets/index.css';
import { realTimeData, realTimeExport, queryCityInfo} from '../service';
import { useRequest } from '@umijs/hooks';

import styles from './index.less';

import moment from 'moment';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import  'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';

const { Option } = Select;
let hiddenData = null

const RealTimeCharts = () => {
  const { data: selectData } = useRequest(queryCityInfo);

  const [termial, setTermial] = useState(sessionStorage.getItem('airport').substring(0, 3)) // 航站
  const [dateValue, setDateValue] = useState([moment(), moment()]) // 日期框的value
  const [checkRange, setCheckRange] = useState('day') // 今日、本周、本月、本年度
  /**
   * 点击文字切换时间
   * @param {value} value 
   */
  const changeDate = (value) => {
    setCheckRange(value)
    setDateValue([moment().startOf(value), moment().endOf(value)])
  }

  const { data: vipMes, run: loadChart} = useRequest((params)=>realTimeData(params),{
    manual: true,
    onSuccess: res=> {
      let vipRooms = []
      let greetNum = []
      let farewellNum = []
      res.data.map(item => {
        vipRooms.push(item.vipRoom)
        greetNum.push(item.counts.split(',')[0])
        farewellNum.push(item.counts.split(',')[1])
      })
      initChart(vipRooms, greetNum, farewellNum) // 加载图表

    }
  })
  const initChart = (vipRooms, greetNum, farewellNum) => {
  // 初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  var option = {
    title: {
        text: '贵宾室实时统计'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['迎接', '送别']
    },
    xAxis: {
        name: '贵宾室',
        data: vipRooms
    },
    yAxis: {
      name: '人数',
      splitLine: {    //网格线
        lineStyle:{
            type:'dashed'    //设置网格线类型 dotted：虚线   solid:实线
        }
      }
    },
    series: [
      {
        name: '迎接',
        type: 'bar',
        barWidth:'20',
        data: greetNum
      },
      {
        name: '送别',
        type: 'bar',
        barWidth:'20',
        data: farewellNum
      }
    ],
      color: ['#ED4444', '#FF9635']
    };
    myChart.setOption(option)
  }

  useEffect(()=>{
    loadChart({
      flightDateBegin: moment(dateValue[0]).format('YYYY-MM-DD'),
      flightDateEnd: moment(dateValue[1]).format('YYYY-MM-DD'),
      org: termial
    })
  }, [dateValue, termial])

  return (
    <div className={styles.realTimeCharts}>
      <div className={styles.chartsBar}>
        <div className={styles.options}>
          <div className={styles.termial}>
            <Select
              style={{ width: 120,height: 32 }}
              allowClear={true}
              showSearch
              placeholder="请选择"
              defaultActiveFirstOption={false}
              filterOption={true}
              optionFilterProp="children"
              notFoundContent={null}
              value={termial}
              onChange={value => {
                setTermial(value)
              }}
            >
              {selectData &&
                selectData.map((v, i) => {
                  return (
                    <Select.Option key={v.CITY3CODE}>{v.CITYNAME}-{v.CITY3CODE}</Select.Option>
                  )
                })
              }
            </Select>
          </div>
          <div className={styles.date}>
            <span className={checkRange === 'day' ? styles.active : ''} onClick={()=>{changeDate('day')}}>今日</span>
            <span className={checkRange === 'week' ? styles.active : ''} onClick={()=>{changeDate('week')}}>本周</span>
            <span className={checkRange === 'month' ? styles.active : ''} onClick={()=>{changeDate('month')}}>本月</span>
            <span className={checkRange === 'year' ? styles.active : ''} onClick={()=>{changeDate('year')}}>全年</span>
            <DatePicker.RangePicker 
              format="YYYY-MM-DD"
              ranges={{
                '今日': [moment(), moment()],
                '本周': [moment().startOf('week'), moment().endOf('week')],
                '本月': [moment().startOf('month'), moment().endOf('month')],
                '全年': [moment().startOf('year'), moment().endOf('year')],
              }}
              onChange={(value)=>{
                setDateValue(value)
              }}
              defaultValue={[moment(), moment()]}
              value={dateValue}>
            </DatePicker.RangePicker>
          </div>
        </div>

        <div className={styles.cont}>
          <div className={styles.chartsCont} id="main"></div>
          <div className={styles.sortCont}>
            <span>迎接&送别数排名</span>
            {
              vipMes && vipMes.data.length > 0
              ? <ul>
                  {vipMes && vipMes.data.map((item, index) => {
                    return (
                      <li>
                        <span>
                          <span>{index+1}</span>
                          <span>{item.vipRoom}</span>
                        </span>
                        <span>{item.counts.replace(',', '|')}</span>
                      </li>
                    )
                  })}
                </ul>
              : null
            }
          </div>
        </div>
      </div>

    </div>
  );
};

export default Form.create()(RealTimeCharts);
